<template>
  <div>
    <!-- 设置下期区域报价 -->
    <el-dialog
      v-el-drag-dialog
      title="设置下期区域报价"
      :visible.sync="visible"
      width="800px"
    >
      <div class="center">
        <!-- 描述列表 -->
        <el-descriptions size="medium" style="margin-top: 10px; margin-bottom: 20px;">
          <el-descriptions-item label="编码">{{ temp.goodsCode }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ temp.goodsName }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ temp.gtName }}</el-descriptions-item>
        </el-descriptions>

        <!-- 总公司定价 -->
        <div class="item">
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">总公司定价</span>
          </div>
          <el-descriptions title="呼叫中心" size="medium" style="margin-top: 20px; margin-bottom: 20px;">
            <el-descriptions-item label="挂牌价">{{ temp.a }}元</el-descriptions-item>
            <el-descriptions-item label="居民价">{{ temp.b }}元</el-descriptions-item>
            <el-descriptions-item label="商业价">{{ temp.c }}元</el-descriptions-item>
            <el-descriptions-item label="工业价">{{ temp.d }}元</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="微信" size="medium" style="margin-top: 20px; margin-bottom: 20px;">
            <el-descriptions-item label="挂牌价">{{ temp.q }}元</el-descriptions-item>
            <el-descriptions-item label="居民价">{{ temp.w }}元</el-descriptions-item>
            <el-descriptions-item label="商业价">{{ temp.e }}元</el-descriptions-item>
            <el-descriptions-item label="工业价">{{ temp.r }}元</el-descriptions-item>
          </el-descriptions>
          <!-- 自定价 -->
          <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
            <el-form-item label="周期编号">
              <el-input v-model="temp.z" :disabled="true" />
            </el-form-item>
            <el-form-item label="生效时间">
              <el-date-picker
                v-model="temp.datetime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-form>
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">呼叫中心定价</span>
          </div>
          <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
            <el-form-item label="挂牌价">
              <el-input v-model="temp.t" />
            </el-form-item>
            <el-form-item label="居民价">
              <el-input v-model="temp.y" />
            </el-form-item>
            <el-form-item label="商业价">
              <el-input v-model="temp.u" />
            </el-form-item>
            <el-form-item label="工业价">
              <el-input v-model="temp.i" />
            </el-form-item>
          </el-form>
          <div class="title">
            <span class="title-icon" />
            <span class="title-text">微信定价</span>
          </div>
          <el-form ref="form" class="form" :model="temp" label-position="right" label-width="80px">
            <el-form-item label="挂牌价">
              <el-input v-model="temp.f" />
            </el-form-item>
            <el-form-item label="居民价">
              <el-input v-model="temp.g" />
            </el-form-item>
            <el-form-item label="商业价">
              <el-input v-model="temp.h" />
            </el-form-item>
            <el-form-item label="工业价">
              <el-input v-model="temp.j" />
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false"> 保存 </el-button>
        <el-button @click="visible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'nextPriceEdit',
    data() {
      return {
        visible: false,
        temp: {}
      }
    },
    methods: {
      open(temp) {
        this.temp = temp
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          // if (temp) {
          //   this.orderCode = temp
          // }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
.center {
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
}

.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 16px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 50%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
